<template>
  <div>
    <div class="search">
      <van-nav-bar left-arrow>
        <template #title>
          <van-search label="地址" placeholder="请输入搜索关键词">
            <template #label>
              <div @click="$router.push('/cityList')">上海</div>
            </template>
          </van-search>
        </template>
        <template #right>
          <van-icon name="location-o" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item title="区域">
        <van-picker :columns="columns" />
        <div>
          <van-button type="default"> 取消 </van-button>
          <van-button type="primary"> 确认 </van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="方式"
        ><van-picker :columns="['不限', '整租', '合租']" />
        <div>
          <van-button type="default"> 取消 </van-button>
          <van-button type="primary"> 确认 </van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="租金"
        ><van-picker
          :columns="['不限', '1000及以下', '1000-2000', '2000-3000']"
        />
        <div>
          <van-button type="default"> 取消 </van-button>
          <van-button type="primary"> 确认 </van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="筛选">
        <van-popup v-model="show" position="right" :style="{ height: '30%' }" />
        <!-- <div>
          <van-button type="default"> 取消 </van-button>
          <van-button type="primary"> 确认 </van-button>
        </div> -->
      </van-dropdown-item>
    </van-dropdown-menu>
    <div>
      <!-- 房屋内容 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <FindItem :list="list" />
      </van-list>
    </div>
    <!-- <van-card
      v-for="item in list"
      :key="item.huseCode"
      :price="item.price"
      :desc="item.desc"
      :title="item.title"
      :thumb="'http://liufusong.top:8080' + item.houseImg"
    >
      <template #tags>
        <van-tag plain type="danger">{{item.tags[0]}}</van-tag>
      </template>
    </van-card> -->
  </div>
</template>

<script>
import { houseList } from '@/api/user'
export default {
  data () {
    return {
      columns: [
        // 第一列
        {
          values: ['区域', '地铁'],
          defaultIndex: 2
        },
        // 第二列
        {
          values: ['不限', '杨浦', '徐汇', '普陀'],
          defaultIndex: 1
        }
      ],
      queryObj: {
        start: 1,
        end: 10
      },
      list: [],
      value: '',
      loading: false,
      finished: false
    }
  },
  methods: {
    async onLoad () {
      const data = await houseList(this.queryObj)
      console.log(data)
    }
  },
  async created (cityId) {
    const data = await houseList(cityId)
    console.log(data)
    this.list = data.body.list
  }
}
</script>

<style lang="less" scoped>
.input {
  width: 90%;
}
/deep/.van-search {
  background-color: rgba(0, 0, 0, -1.5);
}
/deep/.van-nav-bar__content {
  background-color: #21b97a;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
  font-size: 25px;
}
/deep/.van-search {
  width: 100%;
}
/deep/.van-button--default {
  width: 30%;
}
/deep/.van-button--primary {
  width: 70%;
}
</style>
